Parent | Child | Previous | Next
 

Web Grid Videos

IN THIS PAGE

Description

Associate an animation effect with each show/hide expression you define.

Miscellaneous Grid, Tabbed UI and PageLayout Component Features

  • Client-side Show/Hide Expressions can use Animation

    The Grid and Dialog component both allow you to define client-side show/hide expressions to dynamically hide and show controls on a component. Now, you can associate an animation effect with each show/hide expression you define. This video shows how you can do this.

  • Group Headings in Grid

    When a Grid is rendered it can be useful to break the Grid up into logical sections by inserting Group Breaks into the Grid. These videos show how this can be done for both tabular and snaking columnar Grids.

  • Summary Values in Group Headers and Footers

    You can include summary values in Group Headers and Footers. (Contrary to what the video says, this feature is supported on both SQL and .dbf tables).

  • Collapsing and showing rows in each Group

    When you turn on Grouping in a Grid, it can be useful to collapse and show the rows in each Group. This video shows how this is easily done.

  • Scrollable Grids and Fixed Column Widths

    If a Grid is set to display a large number of records, it can take up a large amount of vertical space on your page. You might prefer to specify a fixed amount of vertical space and then have the Grid scroll within the specified window size, keeping column titles and summary values fixed in place when the Grid is scrolled. This video shows how this is easily done:

  • Setting Multiple Properties at Once Using Xbasic

    This video shows how you can use an Xbasic function when you are setting properties in multiple controls at once. For example, assume that you have built a component with many controls and you would like to wrap all of the control labels in language tags ( and ), so that you can internationalize your component.

    This feature applies to both the Grid and the Dialog component. The video shows the feature in the Dialog component, but the feature operates in exactly the same way in the Grid.

  • Project Styles - Set the style of every component in one place to make it easy to change the style of every component at once.

    This video shows how instead of hard coding the style used by each component in your project at Design Time, you can now set the style to . The actual style to use is set in the Web's Project Properties dialog.

  • Default Value for New Records when doing data entry in the Grid Part.

    The Grid allows you to enter new records directly in the Grid part, or in the Detail View part. The Grid builder allows you to specify default values for fields in new records. This can be done by either specifying the field's 'Initial Value' property, or by specifying code in the 'onInitialValueCalculate' event.

    In the case where data entry is done in the Grid Part (as opposed to the Detail View), the issue with the 'onInitialValueCalculate' event (which is a server-side event), is that it is only called once, when the Grid is initially rendered. So, if you enter a new record and then save that record, the event is not called before the next new record is displayed. This video shows how you can save the value of a field that was just entered inside the Grid's 'stateInfo' object, and then use the 'afterRowPopulate' event to retrieve that value and use it as a default in the next new record.

    The .setValue() method is not used to set the value of the field in the new record row because this would cause the new record row to go 'dirty'. Instead we get a pointer to the element and then simply set its value property.

  • Tabbed UI - Tree Control

    The Tabbed UI displays a series of buttons on the left hand button panel. These buttons open the various pages in your application and shown them in tabs in the Tabbed UI. Now, you can organize these buttons in a tree control layout.

  • Auto-suggest Control - New 'Contains' option

    The auto-suggest feature in the Grid and Dialog component displays a list of matches as the user types into a field. Previously, the control displayed matches that start with the characters that the user typed. Now, you can configure the control to display matches that contain the characters that the user has typed.

  • Global Update Operation to Update a Field in Multiple Rows in a Grid

    When doing data entry into a Grid there may be times when the user wants to copy a value from one row to multiple rows in the Grid. Using Action Javascript is is easy to make a button that does a 'global update' operation on all visible rows in the Grid.

    It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.

  • Global Search and Replace Operation in a Grid

    When doing data entry into a Grid there may be times when the user wants to perform a search and replace operation on the data the currently visible rows in the Grid. Using Action Javascript, it is easy to make a button does a 'global search and replace' on all visible rows in the Grid.

    It is important to recognize that the action shown in this video is a 'client-side' action. No data is actually written to the database until the user clicks the 'Submit' button.

  • Date picker, Date/Time picker and Time Picker

    The Date picker in V11 has been substantially improved over the V10 date picker. It can be be configured as a date picker, date/time picker or time picker. It has a full Javascript event model. Many of the properties (such as the low and high date can be set dynamically using Javascript functions).

    These videos give a tour of the new features.

  • Auto-suggest and Edit-combo Controls allow you to select multiple values

    Both the auto-suggest and edit-combo controls allow you to enter multiple values in the field you are editing. For example, say you have a field called 'Send to' and you want to support a comma delimited list, such as 'Smith,Jones,King,Cohen' and you want the user to be able to select each entry in the list from the pick list.

    This video shows how either the edit-combo, or auto-suggest control can be used for this.

  • Using Action Javascript to toggle the show/hide state of any arbitrary DIV or 'container' using animation

    Animation is built into many of the objects in V11, but there may be times when you want to animate some arbitrary DIV or container. This is now very easy using Action Javascript. You can define complex animations without having to write any code.

  • Changing the number of New Record rows shown in a Grid at run-time

    In an updatable Grid, the number of new record rows shown is a property that is set at Design time. In some applications you might want to expose a property to the user to set this value at Run time. These videos show how you can do this.

  • Action Javascript - Open A Grid Component - How to Invoke a Server-side action when a Grid is Opened

    When you have a client-side event handler (such as a button's onclick event), that opens a Grid (in a pop-up Ajax window, a div, a tabbed UI pane, etc), you might want to execute some Xbasic on the server before the Grid is executed on the server. This topic discusses how you can do this.

  • Grid and Dialog Component - Client-side Mask - Dynamically Setting the Mask at Run-time

    You can now specify a Javascript function to dynamically compute the mask for a control. The Javascript function gets called every time the control gets focus. When the Javascript function gets called, it can read data in the current Grid row, (or Dialog) and compute the mask to use based on this data. For example, say you have a mask for a telephone number field. In the US, UK and Europe, different formats are used for telephone numbers. The Javascript function can decide what format string to return based on the current value of the 'COUNTRY' field.

  • Grid Component - Setting Default Initial Properties - International Developers

    The Options, Set Default Properties command in the Grid Builder has always allowed you to set default properties for the Grid when you create a new Grid. However, if you created a new Grid from a Template, the default properties that you set were not honored. They were only honored if you created a blank new grid. Now, the default properties are used even if you use a template. This makes it much easier to customize the Grid builder for developers whose native language is not English.

  • Grid Component - Search Part - Save and Load Search Criteria

    You can now use the new Repository feature in V11 to save search criteria to the repository and load searches from the repository.

  • Repository Table - Managing Records in the Repository

    This video is aimed at advanced used who use the Repository feature in V11. The video shows how you can create a Grid to manage the records in the Repository that 'belong' to the current component. For example, when you save search criteria from the Search Part of a Grid to the Repository, the search is saved with the GUID of the current component. This is important because when you load a saved search, you only want the user to see the saved searches that 'belong' to the current component. If you want to manage the records in the Repository, (by creating a Grid that is based on the Repository table), you might want to filter the records in the Repository based on the Guid of a particular component. Say you have a Grid called 'Customers' and you want to put a button on this Grid to show the Repository entries that belong to this Grid. You can do this by setting the filter on the target Grid to componentGuid = ComponentGuid()

  • Grid Component - Summary Fields - Styling Summary Values

    You can now define inline styles for summary values. You can also use the new BeforeSummarySectionRender event to make the inline style conditional based on the value of the summary field.

  • Detail View - Animation

    Regardless of where the Detail View is shown, it can be animated. This includes the 'OnPage' and 'InGrid' options.

  • Tabbed UI - Animating the Menu Panel

    You can now animate the showing and hiding of the menu panel on the Tabbed UI Component. To enable animation, check the 'Animation' property in the 'Tabbed UI Properties' pane.

  • Ajax Windows - Animation

    Animation effects have been added for pop-up Ajax windows. Important Note: Ajax windows that contain IFrames, which in turn contain display PDF files cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages (since .a5w pages are hosted in an IFrame). You can control the animation effect for the window display and the window close. You can also control the animation speed. Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation.

  • Grid Component - Tab and Accordion Controls - Animation

    You can now animate the tab and accordion controls in the Grid component. You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.

  • Tabbed UI/Page Layout Components - Animation

    You can now animate the tab and accordion controls in the Button Pane of the Tabbed UI and Page Layout components.

  • Grid Component - Row Expander - Animation

    You can now set animation options for when a row expander in the Grid is opened or closed. To turn animation on, check the 'Animate' property in the Row Expander section of the Grid Builder.

  • Automatic Backup of All Component Files

    Whenever you edit a component, it is automatically backed up. By default, the backups are stored in the _backup.backup folder in your Web Project folder. You can specify where backups are stored by going to the Web Project Properties dialog. For example, you might want to store your backups on a different machine, or in a folder that is linked to your 'DropBox' account. If you store your backups in a DropBox folder, for example, then all of your backups will be automatically backed up into the 'cloud'.

  • Action Javascript - Open .a5w Page - New Options for the Target Window

    This action now has additional options for the target. Previously, the target could be a pop-up Ajax window, a DIV or a Tabbed UI Page. Now you can also specify 'Browser window' to open the target page in a new browser window. When you select the 'Browser window' option, you can specify several different options to control different aspects of the browser window.

  • Grid Component - Making a Grid Behave Like a Data Driven Accordion Component

    Using the new 'Row expand method' property, you can make a Grid component behave like a data driven Accordion Control.

  • Grid Component - Search Highlighting

    The search highlighting feature highlights the strings in the Grid that match your search criteria. This makes it easy to see why a particular record in a Grid was selected when you executed a search.

  • Action Javascript - Opening PDF Files - New Options

    PDF Documents - Tabbed UI, Page Layout, Grid and Dialog Components - All of these component allow you to create Javascript actions that open static PDF files, or dynamically generated PDF files (from Alpha Anywhere reports). Now you can control several aspects of how the PDF in initially rendered. For example, you can set the zoom level to 50% and navigate to page 2 of the document.

  • Abstract CSS Class Names

    V11 Introduces the concept of 'Abstract CSS Class Names'. When you design a Component, all of the HTML is now marked up using abstract CSS class names (e.g. class.gridPartSelect). A class map defines how the abstract CSS class name maps to the physical class names in your CSS stylesheets. This is a very powerful concept because it gives you very granular control over the styling of different elements in your components. These videos explain the concept in more detail.

  • Action Javascript - Binding an Argument Value to Result of a Javascript Function

    (This video is aimed at advanced developers). When you use Action Javascript to open a Grid, Report, Dialog, Custom Component, etc. you often need to bind the value of an argument to a value from the parent Component. For example, you might bind the value of 'arg1' to the value of the Lastname field in the current Grid row. Now, instead of binding an argument to the value of a field in the Grid, you can specify an arbitrary Javascript function to execute. The argument is bound to the value that this Javascript function returns. (Requires build 3816 or above)

  • Advanced Client-Side Show/Hide Expressions - Calling a User Defined Javascript Function when a Show/Hide Event Fires

    (This video is aimed at advanced developers). When a client-side show/hide event fires, you can now define your own Javascript function that will get called. This video shows an interesting use of this functionality. In the video, we show a Grid with a Detail View. In the Detail View, a large number of fields are hidden by show/hide client-side events. The space taken up by the hidden controls is not completely eliminated because the controls are contained in rows (<tr> tags) that are not hidden. We use the Javascript function to hide the empty <tr> tags. (Requires build 3816 or above)

  • Tabbed UI on Mobile Device

    A very common pattern when building Web Applications in Alpha Anywhere is to use the Tabbed UI component as the 'home page' for the app. All of the pages and components in the app are accessed from the Tabbed UI. However, when running on a mobile device (tablet or phone), the Tabbed UI consumes too much real estate. This video shows how you can set a property in the Tabbed UI to change the way in which the Tabbed UI component renders so that it is more appropriate for a mobile devide. (Requires build 3822 or above)

  • Edit-Combo - AfterSelect Event - AjaxCallback

    This video discusses firing an AjaxCallback in the AfterSelect event in an edit-combo control. This video applies to both a Grid and Dialog component. (This is the same as video D31)

  • Getting the User's Current Location and Tracking Location Changes using Action Javascript

    Shows how you can use Action Javascript to get the location of the user and store that information in the Grid or Dialog object. Also shows how you can fire events when the users location changes. This is particular useful in the case of a mobile device.

  • Setting Session Variables when a Child Component is Opened using Action Javascript

    When you define an button using Action Javascript to open a child Grid, Dialog or Custom Component, you can also set session variables at the same time that the Ajax callback is made to open the child component. The session variables can be set to constant values, or to values returned by Javascript functions that you define. For example, you might read the value in a field in the parent Grid and then use that value to set a session variable. (Requires build 3851 or above)

  • Displaying the Value of an Argument that Was Passed into a Grid

    In many cases, a Grid is filtered based on the value of one or more Arguments whose value is set at run-time. This video shows how you can display the value in these arguments a free-form edit-region on the Grid. For example, the Grid might be filtered on an argument called 'WhatState' and you want to show this text in a free-form edit region: Showing records in: (value of :whatstate argument) (Required build 3852 or above)

  • Understanding Global Javascript Variables and the 'Window' Namespace

    Storing data in global Javascript variables is often the easiest way to pass information from one component to another. Global Javascript variables are stored in Javascript's 'window' namespace. These videos give a quick introduction to global Javascript variables, and the Javascript 'window' namespace. (Note: The concepts discussed here are used in video D37)

  • Filtering a Grid Based on the Current Logged in User

    Data in a Grid can be filtered based on the current logged in user. This video shows how to set a filter in a Grid so that only data for the current logged in user is shown. The Grid filter uses an argument whose value is set to a session variable. This session variable is populated when the page that contains the Login Component runs when the user logs in initially.

  • Communicating Between Components - Sending Commands from one Component to Another asdf

    Often, when your application is displaying multiple components on the screen at the same time you will want to send a command from one component to another component. For example, when a child Grid is opened in a Row Expander, you might want to set the default value of a field in the child Grid to a value from the parent Grid, or vice versa. These videos build on concepts discussed in video M43

  • Using Xbasic to Generate HTML by Merging Data into Templates - Understanding the a5_mergeDataIntoTemplate() Function. asdf

    This video is aimed at advanced developers who are generating HTML in hand coded Xbasic scripts. The video demonstrates how the a5_mergeDataIntoTemplate() function can be used to easily create HTML content by merging data from a query into an HTML template.

  • Dynamically Change the Choices for a Checkbox, Radio Button, or Dropdownbox Control in a Grid.

    When you place a checkbox, radiobutton or dropdown box in an editable Grid, the choices shown in the control are the same for each row in the Grid. This video shows how you can make the choices for each row in the Grid dependent on some other field in the current Grid row. NOTE: You might also find video number D41 relevent.

  • Using the Checkbox Column in a Grid to Select Rows and then Opening another Grid Showing the Selected Rows.

    In this video we show how you can select multiple rows in a Grid and then click a button to perform an Ajax callback and open another Grid showing just the records that were checked in the first Grid. See video 87 and 88 for additional information.

    Download Component

See Also